<%--
  Created by IntelliJ IDEA.
  User: 徐贺
  Date: 2021/6/13
  Time: 20:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<script src="js/jquery-1.8.3.min.js"></script>
<style>
  body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "微软雅黑";
    overflow: hidden;
  }
  #bg1{
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("images/1.jpg");
  }
  #bg2{
    position: absolute;
    height: 100%;
    width: 100%;
    background: url("images/1.jpg");
  }
  #container{
    position: absolute;
    background: #fff;
    height: 300px;
    width: 100%;
    top: 50%;
    margin-top: -150px;
    opacity: 0.4;
  }
  #loginContainer{
    position: absolute;
    height: 530px;
    width: 300px;
    top: 50%;
    right: 10%;
    margin-top: -200px;
    background: #fff;
    opacity: 0.5;
    border-radius: 5px;
    z-index: 50;
  }
  #loginHeader{
    position: absolute;
    height: 50px;
    width: 300px;
    top: 50%;
    right: 10%;
    margin-top: -190px;
    z-index: 80;
  }
  #photo{
    position: absolute;
    top: 30%;
    right:15%;
    z-index:90;

  }
  #photo img{
    height: 120px;
    width: 150px;
  }
  #loginHeader span{
    margin-left: 20px;
    text-align: center;
    font-weight: bolder;
    color: #0e475a;
  }
  #loginHeader hr{
    margin: 3px 20px 3px;
  }
  #loginContent{
    position: absolute;
    width: 300px;
    height: 200px;
    top: 70%;
    right: 10%;
    margin-top: -150px;
    z-index: 80;
  }
  #loginContent form{
    margin-left: 20px;
  }
  .loginLabel{
    font-weight: bolder;
    font-size: 14px;
    color: #0e475a;
  }
  .loginInput{
    width: 260px;
    height: 30px;
    padding: 3px 0;
    font-size: 12px;
    color: #797979;
    border: 1px solid #797979;
    margin-bottom: 10px;

  }
  .loginInput:focus{
    outline: none;
    border: 1px solid #2ca8be;
  }
  #registerBtn{
    width: 260px;
    height: 25px;
    margin-top: 10px;
    border: 1px solid #2ca8be;
    background: #2ca8be;
    font-weight: bolder;
    color: #fff;
  }

</style>
<head>
  <title>Title</title>
</head>
<script type="text/javascript">
  function message () {
    var message="${message}"
    if( message !=""){
      alert(message);
    }
  }
</script>
<body onload="message()">
<div id='bg1'></div>
<div id='bg2'></div>
<div id='container'></div>
<div id='loginContainer'>
</div>
<div id='loginHeader'>
  <span>注册</span>
  <hr size="3px" color="#2ca8be" />
</div>
<div id='photo'>
  <img src="images/icon.jpg" style="border-radius: 50%">
</div>
<div id='loginContent'>
  <form action="register" method="post" enctype="multipart/form-data">
    <label for="avatar" class="loginLabel">上传头像</label>
    <br/>
    <input type="file" name="avatar" id="avatar" />
    <br/>
    <label for="userid" class="loginLabel">用户名</label>
    <br/>
    <input id="userid" class="loginInput" type="text" placeholder="请输入用户名" name="userid" />
    <br/>
    <label for="password" class="loginLabel">密码</label>
    <br/>
    <input id="password" class="loginInput" type="password" placeholder="请输入密码" name="password" />
    <br/>
    <label for="username" class="loginLabel">昵称</label>
    <br/>
    <input id="username" class="loginInput" type="text" placeholder="请输入昵称" name="username" />
    <br/>
    <label for="email" class="loginLabel">邮箱</label>
    <br/>
    <input id="email" class="loginInput" type="text" placeholder="请输入邮箱" name="email" />
    <br/>
    <input type="submit" value="注册" id="registerBtn" onclick="return checkForm()"/>
  </form>
</div>
<script>
  function checkForm(){
    //是否为空
    function ifnull(txt){
      if(txt.length==0){
        return true;
      }
      var $reg=/\s+/;
      return $reg.test(txt);
    }

    //验证用户名
    if(ifnull($("#userid").val())){
      $("span").show().text("用户名不能为空");
      return false;
    }
    //验证密码
    if(ifnull($("#password").val())){
      $("span").show().text("密码不能为空");
      return false;
    }else{
      var $reg=/^\w{6,}$/;
      if(!$reg.test($("#password").val())){
        $("span").show().text("密码至少6位");
        return false;
      }
    }
    //验证邮箱
    if(ifnull($("#email").val())){
      $("span").show().text("邮箱不能为空");
      return false;
    }else {
      var $reg=/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
      if (!$reg.test($("#email").val())){
        $("span").show().text("请输入正确的邮箱格式");
        return false;
      }
    }
    return true;
  }

</script>
</body>
</html>
